<script setup lang="ts">
import { ref, computed, watch, onMounted, nextTick } from 'vue'
import SonCom from './components/SonCom.vue'
import SlotCom from './components/SlotCom.vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const msg = ref('')
const money = ref(0)

const msgFunc = (mes: string) => {
  // console.log(mes)
  msg.value = mes
}
const moneyFunc = (qian: number) => {
  console.log(qian)
  money.value = qian
}

// 可以用来跳转的路由对象
const router = useRouter()
const toPageOne = () => {
  // 路由跳转
  router.push('/?key=value&key2=value2')
}

// pinia 使用
const store = useUserStore()

const changeInfo = () => {
  store.info.age++
  store.info.name += '!'
  store.info.token = 'gyhijlksjf,dgsahsijdkj.gb,ruijsedgb,srafejwmk'
}
</script>
<template>
  <h2>第六页(组件通讯)</h2>
  <h1 @click="changeInfo">{{ store.info }}</h1>
  <button @click="toPageOne">去页面 1</button>
  <!-- 父子组件通讯
    父-子：props
    子-父：emit 
  -->
  <!-- :msg 动态设置 msg 的值，后面跟的是表达式
       msg 直接给死一个值，类型是字符串 
  -->
  <SonCom :msg="msg" :money="money" @chang-msg="msgFunc" @change-money="moneyFunc"></SonCom>
  <SlotCom>
    <template #top>
      <button>头部</button>
    </template>
    <template #footer>
      <button>脚部</button>
    </template>
    <!-- 直接写的内容回去默认插槽 -->
    <template #default="db">
      <button>我是按钮{{ db }}</button>
    </template>
  </SlotCom>
</template>
<style scoped>
img {
  width: 300px;
}
</style>
